<template>
<div class="hold-transition">
  <div class="content-header">
                <h1>统计分析<small>会员数量</small></h1>
                <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>统计分析</el-breadcrumb-item>
                    <el-breadcrumb-item>会员数量</el-breadcrumb-item>
                </el-breadcrumb>
                <div class="block">
                    <span class="demonstration">选择月份区间</span>
                    <el-date-picker
                    v-model="value2"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份"
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                </div>
            </div>
            <div class="app-container">
                <div class="box">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="chart1" style="height:600px;"></div>
                </div>
            </div>
</div>
</template>

<script>
export default {
  data() {
    return {
        pickerOptions: {
          shortcuts: [{
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: ''
    };
  },
  watch: {
      value2 : 'changeDates'
  },
  methods: {
    changeDates(newval){
      this.$http.get("api/report/getMemberCountByChangDates/"+newval).then((res)=>{
            if(res.data.flag){
                var myChart = this.$echarts.init(document.getElementById("chart1"));
                myChart.setOption({
                    title:{
                        text:'会员数量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: res.data.data.monthCounts
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.data.yearAndMonth,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: res.data.data.monthCounts,
                        name:'会员数量',
                        type: 'line'
                    }]
                });
            }
        })
    }
  },
  mounted (){
      let o = new Date().getFullYear();
      this.value2 = [ o - 1 + '-01-01', o + '-12-31'];
        this.$http.get("api/report/getMemberCount").then((res)=>{
            if(res.data.flag){
                var myChart = this.$echarts.init(document.getElementById("chart1"));
                myChart.setOption({
                    title:{
                        text:'会员数量'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: res.data.data.monthCounts
                    },
                    xAxis: {
                        type: 'category',
                        data: res.data.data.yearAndMonth,
                    
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: res.data.data.monthCounts,
                        name:'会员数量',
                        type: 'line'
                    }]
                });
            }
        })
    }
  
};
</script>